<!DOCTYPE html>
<html xmlns:sec="http://www.thymeleaf.org/extras/spring-security" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">


    <title>设置推荐图片</title>

    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/hotui/css/font-awesome.min.css" rel="stylesheet"
          th:href="@{/resource/hotui/css/font-awesome.min.css}">
    <!-- Morris -->
    <link href="../../resource/hotui/css/plugins/morris/morris-0.4.3.min.css"
          rel="stylesheet" th:href="@{/resource/hotui/css/plugins/morris/morris-0.4.3.min.css}">
    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>
    <link href="../../resource/hotui/css/style.min-1.0.8.css" rel="stylesheet"
          th:href="@{/resource/hotui/css/style.min-1.0.8.css}">
    <link href="../../resource/hotui/css/hotui.style.override.css"
          rel="stylesheet" th:href="@{/resource/hotui/css/hotui.style.override.css}"/>
    <link href="../../resource/lib/imageview/css/imageviewer.css" rel="stylesheet"/>
    <style>

        #edit_form button {
            padding: 4px 12px;
        }

        .hr-line-dashed {
            margin: 15px 0;
        }

        .specPanel .input-sm {
            height: 20px;
        }

        .specOn {
            border: 1px solid #FFD400;
            background-color: #FFF7E6;
        }

        .bootstrap-tagsinput {
            width: 80%;
        }

        .badge-info, .label-info {
            background-color: #5bc0de;
        }

        .removeBtn {
            position: absolute;
            right: 6px;
            top: 0px;
            color: #ccc;
            background: rgba(0, 0, 0, 0.3);
        }
    </style>
</head>

<body>
<div class="wrapper wrapper-content  fadeInRight tooltip-demo">
    <form id="edit_form" role="form" th:object="${room}">
        <input id="hdRoomId" th:value="*{id}" type="hidden"/>
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content" style="border-top: none;">
                        <div class="panel-body form-horizontal">
                            <div class="form-group ">
                                <label class="col-sm-2 control-label">是否推荐:</label>
                                <div class="col-sm-10">
                                    <select class="form-control input-sm input-s" id="sltRecommendFlag"
                                            style="height: 34px;">
                                        <option th:selected="*{recommendFlag}" value="1">推荐</option>
                                        <option th:selected="*{!recommendFlag}" value="0">不推荐</option>
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed "></div>
                            <div class="form-group ">
                                <label class="col-sm-2 control-label">背景颜色值:</label>

                                <div class="col-sm-10">
                                    <input class="form-control input-sm input-s" id="backgroundColor"
                                           placeholder="背景颜色值"
                                           th:value="*{backgroundColor}"
                                           type="text"/>
                                </div>
                            </div>
                            <div class="hr-line-dashed "></div>
                            <div class="form-group ">
                                <label class="col-sm-2 control-label">背景图片:</label>

                                <div class="col-sm-10">
                                    <img id="squareView" src="../../resource/img/p1.jpg"
                                         style="height: 70px;" th:src="${room.backgroundImage}"/>
                                    <a href="javascript:$('#fileSquare').click()"
                                       sec:authorize="hasRole('ADMIN')">修改</a>
                                    <input accept="image/*" class="file" id="fileSquare" name="img"
                                           style="display: none;"
                                           type="file" val-element="#backgroundImage" view-element="#squareView"/>
                                    <input id="backgroundImage" name="backgroundImage" th:value="*{backgroundImage}"
                                           type="hidden"/>
                                </div>
                            </div>
                            <div class="hr-line-dashed "></div>
                            <div class="form-group">
                                <div style="text-align: right">
                                    <button class="btn btn-success btn-submit" id="editBtn" type="button">
                                        保存修改
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js(123123)}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js"></script>

<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>
<script src="../../resource/lib/imageview/js/imageviewer.min.js"
        th:src="@{/resource/lib/imageview/js/imageviewer.min.js}"></script>
<script src="../../resource/hotui/js/plugins/ajaxfileupload.js"
        th:src="@{/resource/hotui/js/plugins/ajaxfileupload.js}"></script>

<script th:inline="javascript" type="text/javascript">
    const uploadUri = /*[[@{/resource/upload}]]*/  "";
    const editUri = /*[[@{/live/edit/rec/}]]*/  "";
</script>

<script type="text/javascript">
    var index = parent.layer.getFrameIndex(window.name);

    $(function () {
        var viewer = ImageViewer();
        $('.imgView').click(function () {
            let imgSrc = this.src,
                highResolutionImage = $(this).data('low-res-img');

            viewer.show(imgSrc, highResolutionImage);
        });

        $(".file").change(function () {
            let $view = $($(this).attr('view-element'));
            let $val = $($(this).attr('val-element'));
            hot.fileUpload(uploadUri, $(this).attr('id'), null, function (apiResult) {
                //覆盖图片
                $view.attr("src", apiResult.data.previewUrl);
                $val.val(apiResult.data.previewUrl);
            });
        });

        $("#editBtn").click(function () {
            let roomId = $("#hdRoomId").val();
            let recommendFlag = $("#sltRecommendFlag").val();
            let backgroundColor = $("#backgroundColor").val();
            let backgroundImage = $("#backgroundImage").val();

            let requestData = {
                roomId: roomId,
                recommend: recommendFlag,
                backgroundColor: backgroundColor,
                backgroundImage: backgroundImage
            };

            hot.ajax(editUri, requestData, function (apiResult) {
                if (apiResult.resultCode === 2000) {
                    hot.tip.success("修改成功", function () {
                        parent.location.reload();
                        parent.layer.close(index);
                    });
                } else {
                    hot.tip.error(apiResult.resultMsg);
                }
            }, function () {
            }, "post", 300);
        })
    });
</script>
</body>

</html>
